<template>
  <div class="flow">
    <div class="formLook" :class="{ 'full-width': isFullWidth }">
      <div class="main">
        <TitleComponent title="用人需求申请" />
        <!-- 需求信息 -->
        <div class="needNotes">
          <div class="title_line">
            <div class="title_img">
              <img src="@/assets//images/demand.png" alt="" />
            </div>
            <p class="title">需求信息</p>
          </div>
          <div>
            <el-form
              ref="neekWorksFormOne"
              :model="neekWorksForm"
              label-width="150px"
              class="demo-neekWorksForm"
              :size="formSize"
              status-icon
              label-position="right"
            >
              <el-form-item label="岗位需求描述:" prop="requireJobOverview">
                <el-input
                  :disabled="true"
                  placeholder="请输入岗位需求描述"
                  v-model="neekWorksForm.requireJobOverview"
                />
              </el-form-item>

              <el-form-item label="需求申请人:" prop="requireProposerName">
                <el-select
                  :disabled="true"
                  v-model="neekWorksForm.requireProposerName"
                  clearable
                  placeholder=""
                  style="width: 100% !important"
                  @change="requireProposerChange"
                >
                  <el-option
                    v-for="item in requireProposerOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="需求部门:" prop="requireDeptId">
                <el-select
                  :disabled="true"
                  v-model="neekWorksForm.requireDeptId"
                  clearable
                  placeholder=""
                  style="width: 100%"
                  @change="requireDeptIdChange"
                >
                  <el-option
                    v-for="item in buIdOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="申请时间:" prop="proposeTime">
                <el-date-picker
                  v-model="neekWorksForm.proposeTime"
                  :disabled="true"
                  type="date"
                  placeholder="年/月/日"
                />
              </el-form-item>
              <el-form-item label="HR:" prop="hrName">
                <el-select
                  v-model="neekWorksForm.hrName"
                  :disabled="true"
                  clearable
                  placeholder=""
                  style="width: 100%"
                  @change="hrNameChange"
                >
                  <el-option
                    v-for="item in hrNameOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <!-- 岗位信息 -->
        <div class="needNotesJob">
          <div class="title_lineJob">
            <div class="title_line">
              <div class="title_img">
                <img src="@/assets//images/demand.png" alt="" />
              </div>
              <p class="title">岗位信息</p>
            </div>

            <!-- 岗位按钮 -->
            <div class="post">
              <div
                v-for="(item, index) in jobIndexList"
                :key="index"
                :class="jobIndex == index ? 'clickjob' : 'noclickjob'"
                style="
                  width: 70px;
                  height: 30px;
                  border-radius: 4px;
                  color: #fff;
                  display: flex;
                  align-items: center;
                  justify-content: space-around;
                  padding: 0 5px;
                  margin-left: 10px;
                  cursor: pointer;
                "
              >
                <span @click="btnJob(index)">岗位{{ item }}</span>
              </div>
            </div>
          </div>
          <el-form
            :ref="'neekWorksFormRef' + jobIndex"
            :model="neekWorksForm.jobPostDetailDtoList[jobIndex]"
            label-width="150px"
            class="demo-neekWorksForm"
            :size="formSize"
            status-icon
            label-position="right"
          >
            <el-form-item label="岗位名称:" prop="jobName">
              <el-input
                :disabled="true"
                v-model="neekWorksForm.jobPostDetailDtoList[jobIndex].jobName"
                placeholder="请输入岗位名称"
              />
            </el-form-item>

            <el-form-item label="招聘类型:" prop="recruitmentType">
              <el-select
                :disabled="true"
                v-model="
                  neekWorksForm.jobPostDetailDtoList[jobIndex].recruitmentType
                "
                clearable
              >
                <el-option
                  v-for="item in sys_recruitment_type"
                  :key="item.value"
                  :label="item.label"
                  :value="Number(item.value)"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="职级:" prop="positionLevel">
              <el-input
                :disabled="true"
                v-model="
                  neekWorksForm.jobPostDetailDtoList[jobIndex].positionLevel
                "
                placeholder=""
              />
            </el-form-item>

            <el-form-item label="薪酬范围:" prop="salaryRange">
              <el-input
                :disabled="true"
                v-model="
                  neekWorksForm.jobPostDetailDtoList[jobIndex].salaryRange
                "
                placeholder="请输入薪酬范围"
              />
            </el-form-item>
            <el-form-item label="岗位性质:" prop="jobNature">
              <el-select
                :disabled="true"
                v-model="neekWorksForm.jobPostDetailDtoList[jobIndex].jobNature"
                clearable
              >
                <el-option
                  v-for="item in sys_job_nature"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item prop="jobResponsibilities">
              <!-- 自定义 label -->
              <template #label>
                <span style="display: flex; align-items: center">
                  <span>岗位职责:</span>
                  <el-tooltip
                    placement="right"
                    trigger="click"
                    popper-class="successTip"
                  >
                    <template #content>
                      <div class="tooltipText">
                        <div class="textOne">已规避岗位不清晰的用工风险！</div>
                        <div class="textTwo">
                          如果用人单位没有制定明确的录用条件，那么很有可能
                        </div>
                        <div class="textTwo">
                          会对日后以“员工在试用期间被证明不符合录用条件”
                        </div>
                        <div class="textTwo">为由解除劳动合同带来麻烦。</div>
                      </div>
                    </template>
                    <img src="@/assets//images/check.png" alt="" />
                  </el-tooltip>
                </span>
              </template>

              <!-- 表单项内容 -->
              <el-input
                :disabled="true"
                v-model="
                  neekWorksForm.jobPostDetailDtoList[jobIndex]
                    .jobResponsibilities
                "
                type="text"
                placeholder="请输入岗位职责"
              />
            </el-form-item>

            <el-form-item label="任职条件" prop="qualification">
              <!-- 自定义 label -->
              <template #label>
                <span style="display: flex; align-items: center">
                  <span>任职条件:</span>
                  <el-tooltip
                    placement="right"
                    trigger="click"
                    popper-class="successTip"
                  >
                    <template #content>
                      <div class="tooltipText">
                        <div class="textTwo">
                          招聘简章或广告中常见的歧视性内容包括：民族歧视、
                        </div>
                        <div class="textTwo">
                          种族歧视、性别歧视、农村劳动者、残疾人和传染病病
                        </div>
                        <div class="textTwo">
                          原携带者等。用人单位在招聘过程中不要在招聘简章或
                        </div>
                        <div class="textTwo">
                          广告中出现法律禁止的相关歧视性内容，用人单位依法
                        </div>
                        <div class="textTwo">
                          享有用人自主权，但应当向劳动者提供平等的就业机会，
                        </div>
                        <div class="textTwo">不要发布歧视性的招聘信息。</div>
                      </div>
                    </template>
                    <img src="@/assets//images/error.png" alt="" />
                  </el-tooltip>
                </span>
              </template>
              <el-input
                :disabled="true"
                v-model="
                  neekWorksForm.jobPostDetailDtoList[jobIndex].qualification
                "
                type="text"
                placeholder="请输入任职条件"
              />
            </el-form-item>

            <el-form-item label="岗位关键词:" prop="jobKeywords">
              <el-input
                :disabled="true"
                v-model="
                  neekWorksForm.jobPostDetailDtoList[jobIndex].jobKeywords
                "
                type="text"
                placeholder="请输入岗位关键词"
              />
            </el-form-item>

            <el-form-item label="岗位信息描述文件:" prop="">
              <!-- <el-button
                v-if="neekWorksForm.jobPostDetailDtoList[jobIndex].file"
                class="avatar-uploader-text"
                @click="
                  seeFileView(neekWorksForm.jobPostDetailDtoList[jobIndex].file)
                "
                >{{
                  getFileName(neekWorksForm.jobPostDetailDtoList[jobIndex].file)
                }}</el-button
              >
              <span v-else>暂无岗位信息描述文件</span> -->

              <attachment
                v-if="neekWorksForm.jobPostDetailDtoList[jobIndex].file"
                :employeeResignFileVoList="
                  neekWorksForm.jobPostDetailDtoList[jobIndex].file
                "
              ></attachment>
            </el-form-item>

            <el-form-item label="需求人数:" prop="requirePersonNumber">
              <el-input
                :disabled="true"
                v-model="
                  neekWorksForm.jobPostDetailDtoList[jobIndex]
                    .requirePersonNumber
                "
                placeholder="请输入需求人数"
              />
            </el-form-item>

            <el-form-item label="需求紧急程度:" prop="requireEmergencyLevel">
              <div class="buttonInfo">
                <div class="activeBtn">
                  {{
                    tagText.label[
                      Number(
                        neekWorksForm.jobPostDetailDtoList[jobIndex]
                          .requireEmergencyLevel
                      )
                    ]
                  }}
                </div>
              </div>
            </el-form-item>

            <el-form-item label="期望到岗日期:" prop="hopeArrivalTime">
              <el-date-picker
                :disabled="true"
                v-model="
                  neekWorksForm.jobPostDetailDtoList[jobIndex].hopeArrivalTime
                "
                type="date"
                placeholder="年/月/日"
              />
            </el-form-item>

            <el-form-item label="截止日期:" prop="closeTime">
              <el-date-picker
                :disabled="true"
                v-model="neekWorksForm.jobPostDetailDtoList[jobIndex].closeTime"
                type="date"
                placeholder="年/月/日"
              />
            </el-form-item>

            <el-form-item label="是否是特殊岗位:" prop="name">
              <el-radio-group
                v-model="
                  neekWorksForm.jobPostDetailDtoList[jobIndex].isSpecialPosition
                "
                disabled
              >
                <el-radio value="0" size="large">是</el-radio>
                <el-radio value="1" size="large">否</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item
              label="岗位资格证明要求"
              v-if="
                neekWorksForm.jobPostDetailDtoList[jobIndex]
                  .specialJobRequirements
              "
              prop="specialJobRequirements"
            >
              <el-input
                type="textarea"
                v-model="
                  neekWorksForm.jobPostDetailDtoList[jobIndex]
                    .specialJobRequirements
                "
              />
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="flowtab_info" v-if="!isFullWidth">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="流程过程" name="流程过程">
          <div class="flowProcess">
            <steps
              :flowableDataList="flowableDataList"
              @submit="handleSubmit"
              @close="handleClose"
            ></steps>
          </div>
        </el-tab-pane>
        <el-tab-pane label="流程图" name="流程图">
          <bpmnViewer :flowData="flowDatas" :id="hightlightId" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script setup>
import TitleComponent from "@/components/TitleComponent.vue";
import attachment from "@/components/attachment.vue";
import { searchDepyList } from "@/api/recruitment/jobApplication/index.js";
import {
  seachPersonList,
  needWorkersView,
} from "@/api/recruitment/needWorkers/index.js";
import steps from "@/components/step/index.vue";
import {
  flowablePhoto,
  flowableRecord,
} from "@/api/flowableApi/flowableApi.js";
import { useRoute, useRouter } from "vue-router";
import bpmnViewer from "../../../../components/Process/viewer/index.vue";
import { reactive, onMounted, toRef } from "vue";
import { computed } from "vue";
const query = computed(() => {
  let id = route.query ? Number(route.query.id) : "";
  return { id };
});

const tagText = reactive({
  className: {
    0: "primaryTag",
    1: "warningTag",
    2: "dangerTag",
  },
  label: {
    0: "一般",
    1: "紧急",
    2: "非常紧急",
  },
});
const route = useRoute();
const { proxy } = getCurrentInstance();
const activeName = ref("流程过程");
const formSize = ref("default");
const neekWorksFormOne = ref();
const { sys_recruitment_type } = proxy.useDict("sys_recruitment_type");
const { sys_job_nature } = proxy.useDict("sys_job_nature");
const jobIndexList = ref([1]);
const jobIndex = ref(0);
const buIdOptions = reactive([]);
// 申请人
const requireProposerOptions = reactive([]);
// hr
const hrNameOptions = reactive([]);
const neekWorksForm = reactive({
  delflag: 0, //删除标志位默认为0可以不传
  demandJobs: "" /*需求岗位数量 0单个 1多个*/,
  hrId: "", //hr的id
  hrName: "", //hr的名字
  id: "", //用人需求表主键id
  //添加岗位数据
  jobPostDetailDtoList: [
    {
      closeTime: "", //截至日期
      delFlag: 0, //删除标志位1删除 0未删除
      file: "", //文件
      hopeArrivalTime: "", //期望到达日期
      id: "", //岗位信息表主键id
      isSpecialPosition: "0", //是否是特殊岗位
      jobCode: "", //岗位编码
      jobId: "", //岗位id
      jobKeywords: "", //岗位关键词
      jobName: "", //岗位名称
      jobResponsibilities: "", //岗位职责
      positionLevel: "", //职级
      qualification: "", //任职条件
      recruitmentType: "",
      jobNature: "", //岗位性质
      requireEmergencyLevel: "0", //需求紧急程度
      requireJobId: "", //用人需求表主键id
      requirePersonNumber: "", //需求人数
      salaryRange: "", //薪酬范围
      specialJobRequirements: "", //特殊岗位要求
    },
  ],
  processId: "", //流程实例id
  proposeTime: "", //申请日期
  requireDeptId: "", //需求部门id
  requireDeptName: "", //需求部门name
  requireJobOverview: "", //岗位需求概述
  requireProposerCode: "",
  requireProposerId: "", //需求申请人id
  requireProposerName: "", //需求申请人name
  status: "", //* 审批状态1草稿 2审批中 1000审批完成 201退回修改
  type: "" /*0保存修改  1提交 */,
});
const flowDatas = ref({});
// 审批意见
const auditOpinion = ref("");
// 留痕数据
const flowableDataList = ref([]);
const procInsId = ref("");

const flowKeyValue = ref("");
// 高亮节点id
const hightlightId = ref("");
const isFullWidth = computed(() => {
  return route.query.info === "1";
});

onMounted(() => {
  getDemandDetailsList();
  seachPersonsList();
  // 获取编辑数据
  // if (route.query.info == "1") {
  getEditNeedWork();
  // }
});
// 点击岗位按钮
const btnJob = (index) => {
  jobIndex.value = index;
};

// 部门
const requireDeptIdChange = (val) => {
  buIdOptions.forEach((item) => {
    if (val == item.value) {
      neekWorksForm.requireDeptName = item.label;
    }
  });
};
// 申请人
const requireProposerChange = (val) => {
  requireProposerOptions.forEach((item) => {
    if (val == item.value) {
      neekWorksForm.requireProposerName = item.label;
    }
  });
};
// HR
const hrNameChange = (val) => {
  hrNameOptions.forEach((item) => {
    if (val == item.value) {
      neekWorksForm.hrName = item.label;
    }
  });
};
const seachPersonsList = async () => {
  // HR
  const res1 = await seachPersonList({
    roleKey: "HR",
  });
  if (res1.rows.length > 0) {
    res1.rows.map((item) => {
      let label = item.userName;
      let value = item.userId;
      hrNameOptions.push({
        label,
        value,
      });
    });
  }
  // BMLD
  const res2 = await seachPersonList({
    roleKey: "",
  });
  if (res2.rows.length > 0) {
    res2.rows.map((item) => {
      let label = item.userName;
      let value = item.userId;
      requireProposerOptions.push({
        label,
        value,
      });
    });
  }
};
const getDemandDetailsList = async () => {
  // 搜索部门
  const { data } = await searchDepyList();
  if (data.length > 0) {
    data.map((item) => {
      let label = item.deptName;
      let value = item.deptId;
      buIdOptions.push({
        label,
        value,
      });
    });
  }
};
const init = async (processId, flowKey) => {
  try {
    // 留痕
    const recordRes = await flowableRecord({
      procInsId: processId,
      flowKey: flowKey,
    });
    if (recordRes.data.flowList.length > 0) {
      recordRes.data.flowList.sort((a, b) => {
        return Number(b.taskId) - Number(a.taskId) < 0;
      });
      flowableDataList.value = recordRes.data.flowList;
      if (flowableDataList.value.length > 0) {
        nextTick(() => {
          let x = document.querySelectorAll(".el-step__icon-inner");
          x.forEach((item, index) => {
            item.innerHTML = x.length - index;
          });
        });
      }
    }
  } catch (error) {
    console.error(error);
  }
};
const handleClick = (tab) => {
  if (tab.props.name == "流程图") {
    flowablePhoto({
      procInsId: procInsId.value,
      flowKey: flowKeyValue.value,
    }).then((res) => {
      flowDatas.value = res.data;
      hightlightId.value = res.data.nodeData[res.data.nodeData.length - 1].key;
    });
  }
};
// 编辑数据
const getEditNeedWork = async () => {
  const res = await needWorkersView(query.value.id);
  Object.keys(res.data).forEach((item) => {
    if (res.data[item]) {
      neekWorksForm[item] = res.data[item];
    }
  });
  if (res.data.jobPostDetailVoList && res.data.jobPostDetailVoList.length > 0) {
    res.data.jobPostDetailVoList.sort((a, b) => {
      return a.id - b.id;
    });
    jobIndexList.value = [];
    neekWorksForm.jobPostDetailDtoList = toRef(res.data.jobPostDetailVoList);
    neekWorksForm.jobPostDetailDtoList.forEach((item, index) => {
      jobIndexList.value.push(index + 1);
    });
  }
  auditOpinion.value =
    res.data.reviewOpinionsList && res.data.reviewOpinionsList[0]
      ? res.data.reviewOpinionsList[0].opinionInfo
      : "";
  if (res.data.processId) {
    console.log(res.data.processId, "111111111");
    procInsId.value = res.data.processId;
    flowKeyValue.value = res.data.flowKey;

    // init(res.data.processId);

    init(res.data.processId, res.data.flowKey);
  }
};

/** 关闭按钮 */
const handleClose = () => {
  const obj = { path: "/recruitment/needWorkers" };
  proxy.$tab.closeOpenPage(obj);
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/btn.scss";
@import "@/assets/styles/form.scss";
.noclickjob {
  background: rgba(2, 123, 245, 0.466);
}
.clickjob {
  background: rgb(64, 158, 255);
}

.post {
  display: flex;
  margin-top: 10px;
}

.needNotesJob {
  .title_lineJob {
    .lineJob {
      width: 2px;
      height: 20px;
      background: rgba(245, 154, 35);
      margin-right: 10px;
    }

    .titleJob {
      font-size: 16px;
      font-weight: bold;
      color: rgb(102, 102, 102);
    }
  }

  .text {
    color: #fff;
    font-size: 13px;
    padding: 5px;
    height: 32px;
    width: 76px;
    line-height: 22px;
    border-radius: 4px;
    text-align: center;
  }

  .color1 {
    background: rgb(245, 154, 35);
  }

  .color2 {
    background: rgb(132, 0, 255);
  }

  .isNo {
    width: 43px;
    height: 28px;
    border-radius: 8px;
    line-height: 28px;
    text-align: center;
    color: #fff;
    margin: 0 10px;
    cursor: pointer;
  }

  .isColor {
    background: rgb(107, 202, 0);
  }

  .noColor {
    background: rgb(250, 75, 81);
  }
}

:deep(.el-form) {
  max-width: 100% !important;
  padding-left: 20px;
}

:deep(.el-input__wrapper, .el-select__wrapper.is-disabled) {
  box-shadow: none !important;
  background: white !important;
}

:deep(.el-select__wrapper.is-disabled) {
  box-shadow: none !important;
  background: white !important;
}

:deep(.el-textarea__inner) {
  box-shadow: none !important;
  background: white !important;
}

:deep(.el-form-item) {
  margin-bottom: 16px;
}

:deep(.el-select__suffix) {
  display: none;
}

:deep(.el-input.is-disabled .el-input__inner) {
  color: #383d48;
  -webkit-text-fill-color: #383d48;
  cursor: auto;
}

:deep(.el-input.is-disabled) {
  cursor: auto;
}

:deep(.el-select__wrapper.is-disabled .el-select__selected-item) {
  color: #383d48;
  -webkit-text-fill-color: #383d48;
  cursor: auto;
}

:deep(.el-step.is-vertical .el-step__line) {
  bottom: -25px;
  left: 11px;
  top: 15px;
  width: 2px;
}

.btn {
  width: 30px;
  height: 30px;
  margin-left: 10px;
}

.tooltipText {
  padding: 5px;

  .textOne {
    font-size: 15px;
  }

  .textTwo {
    font-size: 14px;
    color: #fff;
    margin-top: 5px;
  }
}

.tags {
  width: 68px;
  height: 28px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  cursor: pointer;
}

.primaryTag {
  background: rgb(216, 235, 255);
  color: rgb(78, 174, 255);
  font-weight: bold;
}

.warningTag {
  background: rgb(253, 246, 236);
  color: rgb(231, 166, 68);
  font-weight: bold;
}

.dangerTag {
  background: rgb(254, 240, 240);
  color: rgb(245, 115, 115);
  font-weight: bold;
}

.normalTag {
  background: rgb(244, 244, 245);
  color: rgb(167, 169, 174);
  font-weight: bold;
}

.radios {
  height: 14px;
  width: 14px;
  background: rgb(64, 158, 255);
  border-color: rgb(64, 158, 255);
  border: 1px solid #dcdfe6;
  border-radius: 100%;
  box-sizing: border-box;
  display: inline-block;
  /* height: var(--el-radio-input-height); */
  position: relative;
  cursor: pointer;
}

.noradios {
  height: 14px;
  width: 14px;
  background: rgb(255, 255, 255);
  border-color: rgb(255, 255, 255);
  border: 1px solid #dcdfe6;
  border-radius: 100%;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  /* height: var(--el-radio-input-height); */
  position: relative;
}

.radios:after {
  transform: translate(-50%, -50%) scale(1);
  background-color: white;
  border-radius: 100%;
  content: "";
  height: 4px;
  left: 50%;
  position: absolute;
  top: 50%;
  transition: transform 0.15s ease-in;
  width: 4px;
}

:deep(.el-date-editor.el-input) {
  width: 100% !important;
}

// 提示气泡
.successTip.el-popper.is-dark {
  background-color: rgb(151, 250, 102);
  border: 1px solid rgb(151, 250, 102);
  color: #000;
}

// 三角形颜色
.successTip.el-popper.is-dark .el-popper__arrow:before {
  background-color: rgb(151, 250, 102);
  border: 1px solid rgb(151, 250, 102);
}

// 提示气泡
.warningTip.el-popper.is-dark {
  background-color: rgb(255, 232, 117);
  border: 1px solid rgb(255, 232, 117);
  color: #000;
}

// 三角形颜色
.warningTip.el-popper.is-dark .el-popper__arrow:before {
  background-color: rgb(255, 232, 117);
  border: 1px solid rgb(255, 232, 117);
}

.flowProcess {
  height: 100%;
}

.avatar-uploader-text {
  max-width: 180px; /* 设置最大宽度 */
  white-space: nowrap; /* 防止文字换行 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 显示省略号 */

  color: #409eff;
  text-decoration: none;
  cursor: pointer;
}

.avatar-uploader-text:hover {
  text-decoration: underline;
}
</style>
